// 1. yarn add react-transition-group
import React, { PureComponent } from 'react';

import { CSSTransition } from 'react-transition-group';
import { Card, Button } from 'antd';
import 'antd/dist/antd.css';
import './CSSTransition.css'

const { Meta } = Card;
class App extends PureComponent {
 constructor(props) {
   super(props)
   this.state = {
     isShow: true
   }
 }
  render() {
    const { isShow }=this.state
    return (
      <div>
        <Button type="primary" onClick={e => {this.setState({isShow: !isShow})}}>显示/隐藏</Button>
        <CSSTransition
          in={isShow}
          classNames="card"
          timeout={500}
        >
        <Card
          hoverable
          style={{ width: 240 }}
          cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
        >
        <Meta title="Europe Street beat" description="www.instagram.com" />
        </Card>
        </CSSTransition>
        
      </div>
    );
  }
}



export default App;